<template>
    <div>
    <el-tabs type="border-card" v-if="config!=true" v-model="activeName">
    <el-tab-pane label="人事信息表单列表">
        <el-table
          v-loading="showTable"
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{background:'rgb(245,247,250)'}">
            <el-table-column
            prop="name"
            label="表单名"
            width="180">
            </el-table-column>
            <el-table-column

            label="是否可用">
              <template slot-scope="scope">
                {{scope.row.enable=='true'?'可用':'不可用'}}
              </template>
            </el-table-column>
             <el-table-column
            prop="type"
            label="使用用户类型">
            </el-table-column>
             <el-table-column
            prop="update"
            label="操作时间">
            </el-table-column>
            <el-table-column
            prop="creater"
            label="操作人">
            </el-table-column>
            <el-table-column
            label="操作"
            width="360">
             <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleConfig(scope.$index, scope.row)">修改</el-button>
                <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)">属性配置</el-button>
                <el-button
                size="mini"
                type="primary"
                @click="handleFormEdit(scope.$index, scope.row)">表单配置</el-button>
               <el-popconfirm
                 title="确定删除？"
                 @confirm="handleDelete(scope.$index, scope.row)"
               >
                <el-button
                slot="reference"
                size="mini"
                type="danger"
                >删除</el-button>
               </el-popconfirm>
             </template>
            </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="人事信息表单添加" >
        <el-form ref="form1" :model="form1" label-width="80px" size="small" label-position="right">
            <el-form-item label="表单名">
                <el-input v-model="form1.name"></el-input>
            </el-form-item>
<!--            <el-form-item label="使用类型">-->
<!--                <el-select v-model="form.region" placeholder="请选择使用类型">-->
<!--                <el-option label="列表" value="list"></el-option>-->
<!--                <el-option label="单表单" value="single"></el-option>-->
<!--                </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="人员类型">-->
<!--                <el-select v-model="form.region" placeholder="请选择人员类型">-->
<!--                <el-option label="在职" value="list"></el-option>-->
<!--                <el-option label="规培" value="single"></el-option>-->
<!--                <el-option label="实习" value="list"></el-option>-->
<!--                <el-option label="进修" value="single"></el-option>-->
<!--                </el-select>-->
<!--            </el-form-item>-->
            <el-form-item label="人员性质">
                <el-select v-model="form1.type" placeholder="请选择人员性质">
                  <el-option label="护士" value="护士"></el-option>
                  <el-option label="医生" value="医生"></el-option>
                  <el-option label="医技" value="医技"></el-option>
                  <el-option label="后勤" value="后勤"></el-option>
                  <el-option label="管理" value="管理"></el-option>
                  <el-option label="药剂" value="药剂"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否可用">
                <el-select v-model="form1.enable" placeholder="请选择是否可用">
                  <el-option label="可用" value="true"></el-option>
                  <el-option label="不可用" value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form1.desc" style="width:600px"></el-input>
            </el-form-item>
            <el-form-item style="margin-left:80px">
                <el-button type="primary" @click="onSubmit(1)">保存</el-button>
<!--                <el-button>取消</el-button>-->
            </el-form-item>
        </el-form>
    </el-tab-pane>
    <el-tab-pane name="人事信息表单修改" label="人事信息表单修改" :disabled="true">
         <el-form ref="form" :model="form2" label-width="80px" size="small" label-position="right">
            <el-form-item label="表单名">
                <el-input v-model="form2.name"></el-input>
            </el-form-item>
            <el-form-item label="人员性质">
                <el-select v-model="form2.type" placeholder="请选择人员性质">
                <el-option label="护士" value="护士"></el-option>
                <el-option label="医生" value="医生"></el-option>
                <el-option label="医技" value="医技"></el-option>
                <el-option label="后勤" value="后勤"></el-option>
                <el-option label="管理" value="管理"></el-option>
                <el-option label="药剂" value="药剂"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否可用">
                <el-select v-model="form2.enable" placeholder="请选择是否可用">
                  <el-option label="可用" value="true"></el-option>
                  <el-option label="不可用" value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form2.desc" style="width:600px"></el-input>
            </el-form-item>
            <el-form-item style="margin-left:80px">
                <el-button type="primary" @click="onSubmit">保存</el-button>
<!--                <el-button>取消</el-button>-->
            </el-form-item>
        </el-form>
    </el-tab-pane>
    </el-tabs>
    </div>
</template>

<script>
import formConfig3 from '../components/formConfig3.vue'
import formConfig2 from './formConfig2.vue'
import TaskManager from "../service/TaskManager.js";
export default {
    name:"form",
    components:{formConfig3,formConfig2},
        data(){
        return{
        activeName:"",
        oldName:"",
        config:false,
        showTable:true,
        tableData: [],
         form1: {
          name: '',
          type: [],
          desc:"",
          enable:true,
        },
        form2: {
          name: '',
          type: [],
          desc:"",
          enable:true,
        },
        form3: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
     }
  },
  methods:{
      handleConfig(index,row){
          console.log(index,row)
          this.activeName="人事信息表单修改"
          this.form2=row
          this.oldName=row.name
      },
      handleEdit(index,row){
          this.$router.push({name:'formList',params:{row:row}})
      },
      handleFormEdit(index,row){
        this.$router.push({name:'formConfig2',params:{row:row}})
      },
      handleDelete(index,row) {
        this.showTable=true;
        TaskManager.deleteDynamic({id:row.id,status:'0'}).then(()=>{
          TaskManager.getDynamicForm({status:0}).then((res)=>{
            this.tableData=res.data;
            this.showTable=false;
          })
        })

      },
      getDay() {
        let day=new Date();
        return day.getFullYear()+"-"+(day.getMonth()+1)+"-"+(day.getDate());
      },
      onSubmit(num){
          let params={};
            if(num==1){
              params={
                status:'1',
                update:this.getDay(),
                name:this.form1.name,
                type:this.form1.type,
                isNew:true,
                enable:this.form1.enable,
                creater:window.localStorage.dept+"-"+window.localStorage.name,
                desc:this.form1.desc
              }
            }else {
               params = {
                status: '1',
                update: this.getDay(),
                oldName: this.oldName,
                name: this.form2.name,
                type: this.form2.type,
                enable: this.form2.enable,
                creater:window.localStorage.dept+"-"+window.localStorage.name,
                 desc:this.form2.desc
              }
            }
              TaskManager.saveDynamic(params).then((res)=>{
                if(res.data=='success'){
                  this.$message({
                    type:"success",
                    message:"保存成功！"
                  })
                  TaskManager.getDynamicForm({status:0}).then((res)=>{
                    this.tableData=res.data;
                    this.showTable=false;
                    this.activeName="人事信息表单列表"
                  })
                }else{
                  this.$message({
                    type:"error",
                    message:res.data
                  })
                }
              })
            }
    },
    mounted() {
        TaskManager.getDynamicForm({status:0}).then((res)=>{
          this.tableData=res.data;
          this.showTable=false;
        })
    }
}
</script>

<style scoped>
.el-tabs--border-card{
     box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
}
.el-input{
    width: 250px;
}
.el-form-item{
    display: flex;
    justify-content: flex-start;
}
</style>
